<template>
  <div>
    <ul class="detail-footer-wrapper">
      <li>
        <div @click="SET_DETAILFOOTERSTATUS(false)" class="detail-footer-input">
          <i class="iconfont iconchuangzuo"></i>
          写评论...
        </div>
      </li>
      <li class="badge-wrapper">
        <i class="iconfont icontaolunqu"></i><sup>{{ commentCount }}</sup>
      </li>
      <li><i class="iconfont iconshoucang"></i></li>
      <li><i class="iconfont icondianzan"></i></li>
      <li><i class="iconfont iconfenxiang"></i></li>
    </ul>
  </div>
</template>

<script>
import { mapMutations, mapGetters } from "vuex";
export default {
  methods: {
    ...mapMutations("msbd", ["SET_DETAILFOOTERSTATUS"]),
  },
  computed: {
    ...mapGetters("detail", ["commentCount"]),
  },
};
</script>

<style scoped>
.detail-footer-wrapper {
  height: 60px;
  display: flex;
}
.detail-footer-wrapper li:first-child {
  flex-grow: 1;
}
.detail-footer-wrapper li {
  width: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
}
.detail-footer-wrapper li i {
  font-size: 25px;
}
.detail-footer-input {
  height: 30px;
  width: 100%;
  background-color: #ddd;
  border-radius: 15px;
  margin-left: 10px;
  font-size: 14px;
  display: flex;
  align-items: center;
  padding-left: 10px;
}

.detail-footer-wrapper .detail-footer-input i {
  font-size: 16px;
  margin-right: 10px;
}
</style>